import * as echarts from 'echarts'
export const leftTopChart = {
    backgroundColor: 'transparent',
    calculable: true,
    title: [{
        text: '425.6',
        left: '48%',
        top: '37%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'bold',
            fontSize: '18',
            color: '#fff',
            textAlign: 'center',
        },
    },
    {
        text: 'PPM',
        left: '48%',
        top: '45%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'bold',
            fontSize: '10',
            color: '#fff',
            textAlign: 'center',
        },

    }],
    grid: {
        left: '00%',
        right: '0%',
        bottom: '0%',
        top: '0%',
        containLabel: true
    },
    series: [
        {
            name: '',
            type: 'pie',
            startAngle: 0,
            clockwise: false,
            radius: ["30%", "90%"],
            center: ['50%', '45%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'inside',
                formatter: '{c}$',

                textStyle: {
                    fontWeight: '100',
                    fontFamily: 'Microsoft YaHei',
                    color: '#FAFAFA',
                    // fontSize: 8
                },
            },
            itemStyle: {
                normal: {
                    color: "#367ee2",
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                emphasis: {
                    color: "#16d7b9"
                }
            },

            data: [{
                value: 600,
                name: 'A',
            },
            {
                value: 1100,
                name: 'B',
            },
            {
                value: 1200,
                name: 'C',
            },
            {
                value: 1300,
                name: 'D',
            },
            {
                value: 1250,
                name: 'E',
            },
            {
                value: 400,
                name: "F",
            },
            {
                value: 680,
                name: "G",
            },
            {
                value: 850,
                name: "H",
            },
            {
                value: 470,
                name: "I",
            },
            {
                value: 780,
                name: "J",
            },
            {
                value: 680,
                name: "K",
            },
            {
                value: 880,
                name: "L",
            },
            {
                value: 1201,
                name: "M",
            },
            {
                value: 540,
                name: "N",
            },
            {
                value: 960,
                name: "O",
            },
            {
                value: 1280,
                name: "P",
            }
            ]
        },
        {
            type: 'pie',
            radius: ["28.5%", "30%"],
            data: [100],
            center: ['50%', '45%'],
            itemStyle: {
                normal: {
                    color: '#888',
                    shadowColor: '#000',
                    shadowBlur: 15,
                    shadowOffsetX: '0',
                    shadowOffsetY: '0',
                }
            },
            hoverAnimation: false,
            label: {
                show: false,
            }
        },
        {
            type: 'pie',
            radius: ["26.5%", "27%"],
            data: [100],
            center: ['50%', '45%'],
            color: '#888',
            hoverAnimation: false,

        },

    ]
};

let xLabel = ['AM9:00', 'AM12:00', 'PM15:00', 'PM18:00', 'PM21:00']
let goToSchool = ["40", "60", "22", "85", "50", "40"]
let goOutSchool = ["20", "50", "12", "65", "30", "60"]



export const centerTop = {
    backgroundColor: 'transparent',

    grid: {
        top: '2%',
        left: '2%',
        right: '5%',
        bottom: '10%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        },
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
                color: '#233653'
            },
        },
        axisLabel: { //坐标轴刻度标签的相关设置

            textStyle: {
                color: '#7ec7ff',
                padding: 16,
                fontSize: 14
            },
            formatter: function (data) {
                return data
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#192a44',
                type: 'dashed'
            },
        },
        axisTick: {
            show: false,
        },
        data: xLabel
    }],
    yAxis: {
        show: false
    },
    legend: {
        data: ['降水量', '月均降水量'],
        top: '10%',
        right: '5%'
    },
    series: [{
        name: '降水量',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "#5a65aa", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: "rgba(25,163,223,1)",
            borderColor: "#646ace",
            borderWidth: 2

        },
        tooltip: {
            show: true
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#5a65aa"


                },
                {
                    offset: 1,
                    color: "transparent"
                }
                ], false),
                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: goToSchool
    }, {
        name: '月均降水量',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "#21dbd5", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: "#21dbd5",
            borderColor: "#646ace",
            borderWidth: 2

        },
        tooltip: {
            show: true
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#21dbd5"
                },
                {
                    offset: 1,
                    color: "transparent"
                }
                ], false),
                shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: goOutSchool
    }]
}

var data1 = [50, 45, 40, 35, 30];
var data3 = [32, 33, 26, 13, 21];
var datacity = ['3.4-5.4', '5.5-7.9', '8-10.7', '1.6-3.3', '0.3-1.5'];
export const leftBottomChart = {
    backgroundColor: 'transparent',
    // 指定图表的配置项和数据
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    grid: { //图表的位置
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    yAxis: [{
        type: 'value',
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} '
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },
        show: false

    }],
    xAxis: [{
        type: 'category',
        axisLabel: {
            show: true,
            splitNumber: 0,
            textStyle: {
                fontSize: 10,
                color: '#fff'
            },
        },
        axisTick: {
            show: false,
        },
        data: datacity,
    }],
    series: [{
        name: '存量',
        type: 'bar',
        barWidth: '20px',
        data: data1,
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#6a60f9"
                },
                {
                    offset: 1,
                    color: "#20f8fc"
                }
                ], false),
            }
        },
        label: {
            show: true,
            position: 'top',
            formatter: "{d|{c}}次",
            rich: {
                d: {
                    fontSize: 20,
                    color: '#fff',
                    fontWeight: 600
                }
            }
        }

    },
    {
        name: '拆除',
        type: 'bar',
        color: '#F6931C',
        barWidth: '20px',
        data: data3,
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#f3f95d"
                },
                {
                    offset: 1,
                    color: "#25fc7a"
                }
                ], false),
            }
        }


    },

    ]
};
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - 9, shape.y - 9]
        const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
    }
})
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
        const c4 = [shape.x + 18, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + 18, shape.y - 9]
        const c3 = [shape.x + 9, shape.y - 18]
        const c4 = [shape.x - 9, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [600, 600, 600, 600, 600, 600,]
const VALUE = [500, 450, 430, 350, 320, 190]
export const centerBottomChart = {

    backgroundColor: "transparent",
    title: {
        text: '',
        top: 32,
        left: 18,
        textStyle: {
            color: '#00F6FF',
            fontSize: 24
        }
    },

    legend: {
        show: false,
        data: ['折旧值', '原值'],
        top: '10%',
        right: 0,
        orient: 'vertical',

        color: ['#43A3E4', '#113D87']
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    grid: {
        left: 0,
        right: '20%',
        bottom: '5%',
        top: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        show: false,
        data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',],
        axisLine: {
            show: false,
            lineStyle: {
                color: 'white'
            }
        },
        offset: 20,
        axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
                color: '#7DFFFD'
            }
        },
        axisLabel: {
            fontSize: 10
        }
    },
    yAxis: {
        type: 'value',
        show: false,
        axisLine: {
            show: true,
            lineStyle: {
                color: 'white'
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            fontSize: 16
        },
        boundaryGap: ['20%', '20%']
    },
    series: [{
        name: '原值',
        type: 'custom',
        renderItem: function (params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(47,102,192,.27)'
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(59,128,226,.27)'
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(72,156,221,.27)'
                    }
                }]
            }
        },

        data: MAX
    }, {
        name: '折旧值',
        type: 'custom',

        renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',

                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }]
            }
        },

        data: VALUE
    }, {
        name: '原值',
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'top',
                fontSize: 8,
                color: '#fff',
                offset: [4, -25],
                formatter: (params, index) => {
                    let { dataIndex, value } = params
                    return VALUE[dataIndex]
                },
                textStyle: {
                    fontSize: 14,
                    color: '#4BBEFA',
                }

            }
        },
        itemStyle: {
            color: 'transparent'
        },
        data: MAX
    }]
}
export const centerBottomChart2 = {
    backgroundColor: "transparent",
    legend: {
        name: ['环比'],
        show: false,
        right: 20,
        top: 20
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#070724bf',
        borderColor: '#00ffea59',
        // shadowColor: 'rgba(158,135,255, 0.3)',
        //   shadowBlur: 10,
        //   shadowOffsetY: 20
        textStyle: {
            color: '#00FFEA',
            fontSize: 12
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '15%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        axisLine: {
            show: true,
            lineStyle: {
                color: "##39dfe6"
            }
        },
        splitArea: {
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            lineStyle: {
                color: "##39dfe6"
            }
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: ['2020-02-03', '2020-02-04', '2020-02-05', '2020-02-06', '2020-02-07', '2020-02-08'],

    }],

    yAxis: [{
        show: true,
        nameTextStyle: {
            color: "#6c50f3",
            fontSize: 14
        },
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#6c50f3"
            }
        },
        axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
                color: '#39dfe6',

            },
        },
        axisTick: {
            show: false,
            lineStyle: {
                color: "#39dfe6"
            }
        },
    }],
    series: [{
        name: '周比',
        type: 'line',
        smooth: true,
        lineStyle: {
            normal: {
                color: "#39dfe6",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
            },
        },
        label: {
            show: false,
            position: 'top',
            textStyle: {
                color: '#39dfe6',
            }
        },
        itemStyle: {
            color: "#39dfe6",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#070724bf',
            borderColor: '#00ffea59',
            // shadowColor: 'rgba(158,135,255, 0.3)',
            //   shadowBlur: 10,
            //   shadowOffsetY: 20
            textStyle: {
              color: '#00FFEA',
              fontSize: 12
            }
          },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#39dfe6'
                },
                {
                    offset: 1,
                    color: 'rgba(108,80,243,0)'
                }
                ], false),
                shadowColor: 'rgba(108,80,243, 0.9)',
                shadowBlur: 20
            }
        },
        data: [430, 261, 317, 458, 221, 349]
    }]
}
const createSvg = ({ width, height, shadowColor, shadowBlur, points }) => {
    const ret = [`M${points[0][0]} ${points[0][1]}`];
    for (let i = 1; i < points.length; i++) {
        ret.push(`L${points[i][0]} ${points[i][1]}`);
    }
    ret.push('Z');
    const rectPath = ret.join(' ');
    return (`
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
            x="0px" y="0px" 
            width="${width}"
            height="${height}"
        >
            <style>
                .st1 {
                    fill: transparent;
                    stroke: ${shadowColor};
                    stroke-width: ${shadowBlur}px;
                    filter: url(#chart-inset-shadow);
                    clip-path: url(#chart-clip);
                }

            </style>
            <defs>
              
                <clipPath id="chart-clip">
                    <path d="${rectPath}" />
                </clipPath>
                
                <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
            		<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${shadowBlur * 0.75}" />
            		<feMerge>
            			<feMergeNode in="gass" />
            		</feMerge>
            	</filter>

            </defs>
            <g>
                <path class="st1" d="${rectPath}" />
            </g>
        </svg>
    `);

};

const cretateSvgUrl = (svgOption) => {
    const svgString = createSvg(svgOption);
    const svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });

    const DOMURL = window.URL || window.webkitURL || window;
    const insetShadowUrl = DOMURL.createObjectURL(svg);

    return insetShadowUrl;
};

const dataSet = [
    ['10-15', '30-35', '25-30', '20-25', '15-20'],
    [100, 90, 80, 66, 90],
    [70, 30, 60, 86, 20],
];

const maxValue = [...dataSet[1], ...dataSet[2]].reduce((m, v) => Math.max(m, v), -Infinity);

const radius = 0.5;
const theta = Math.PI * 2 / dataSet[2].length;

const getPoints = (R, ps, max) => ps.map((v, i) => {
    const t = i * theta;
    const d = v / max;
    const x = R - Math.sin(t) * R * d;
    const y = R - Math.cos(t) * R * d;
    return [x, y];
});

export const rightBottomChart = {
    backgroundColor: 'transparent',
    tooltip: {
        // trigger: 'axis',
        show: false 
    },
    polar: {
        radius: radius * 100 + '%',
        center: ['50%', '50%'],
    },
    angleAxis: {
        type: 'category',
        clockwise: false,
        boundaryGap: false,
        splitLine: {
            show: false,
        },
        axisLine: {
            show: false
        }
    },
    radiusAxis: {
        type: 'value',
        max: 100,
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
    },
    radar: {
        indicator: dataSet[0].map((v, i) => ({ name: v, max: maxValue })),
        radius: radius * 100 + '%',
        center: ['50%', '50%'],
        shape: 'polygon',
        splitNumber: 4,
        name: {
            textStyle: {
                color: '#ffffff',
                fontSize: 14
            }
        },
        splitArea: {
            areaStyle: {
                color: [
                    'rgba(255,255,255,0.1)',
                    'rgba(255,255,255,0.03)',
                    'rgba(255,255,255,0.1)',
                    'rgba(255,255,255,0.03)',
                ]
            }
        },
        splitLine: {
            lineStyle: {
                color: [
                    '#6b6b6b', '#6b6b6b',
                    '#6b6b6b', '#6b6b6b',
                    '#6b6b6b', '#6b6b6b'
                ].reverse(),
                width: 3
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(238,238,238, 0.2)'
            }
        }
    },

    series: [
        {
            type: 'custom',
            name: 's1-inset-shadow',
            silent: true,
            coordinateSystem: 'polar',
            data: [0],
            renderItem: (params, api) => {
                const R = params.coordSys.r;
                const cx = params.coordSys.cx;
                const cy = params.coordSys.cy;

                const x = cx - R;
                const y = cy - R;
                const width = 2 * R;
                const height = 2 * R;

                return {
                    type: 'image',
                    style: {
                        image: cretateSvgUrl({
                            width, height,
                            shadowColor: 'rgba(13, 178, 255, 1)',
                            shadowBlur: 10,
                            points: getPoints(R, dataSet[1], 100)
                        }),
                        x,
                        y,
                        width,
                        height,
                    },
                };
            },
        },
        {
            name: 's1',
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: [
                { value: dataSet[1] }
            ],
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
                normal: {
                    color: 'rgba(87,201,255,0.8)',
                    borderColor: 'rgba(87,201,255,0.2)',
                    borderWidth: 5,
                }
            },
            areaStyle: {
                normal: {
                    color: 'transparent',
                }
            },
            lineStyle: {
                normal: {
                    color: 'rgba(13, 178, 255, 1)',
                    width: 2
                }
            },

        },
        {
            type: 'custom',
            name: 's2-inset-shadow',
            silent: true,
            coordinateSystem: 'polar',
            data: [],
            renderItem: (params, api) => {
                const R = params.coordSys.r;
                const cx = params.coordSys.cx;
                const cy = params.coordSys.cy;

                const x = cx - R;
                const y = cy - R;
                const width = 2 * R;
                const height = 2 * R;

                return {
                    type: 'image',
                    style: {
                        image: cretateSvgUrl({
                            width, height,
                            shadowColor: 'yellow',
                            shadowBlur: 30,
                            points: getPoints(R, dataSet[2], 100)
                        }),
                        x,
                        y,
                        width,
                        height,
                    },
                };
            },
        },
        {
            name: 's2',
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: [
                { value: dataSet[2] }
            ],
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
                normal: {
                    color: 'rgba(87,201,255,0.8)',
                    borderColor: 'rgba(87,201,255,0.2)',
                    borderWidth: 5,
                }
            },
            areaStyle: {
                normal: {
                    color: 'transparent',
                }
            },
            lineStyle: {
                normal: {
                    color: 'yellow',
                    width: 2
                }
            },
            z: 3,
        },

    ]
};